<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>AI+应用设计创新大赛</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--====== Favicon Icon ======-->
    <link rel="shortcut icon" href="/images/favicon.png" type="image/png">
    <!--====== Bootstrap CSS ======-->
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <!--====== default CSS ======-->
    <link rel="stylesheet" href="/css/default.css">
    <link rel="stylesheet" href="/font/bootstrap-icons.css">
    <!--====== Style CSS ======-->
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/main.css">
    <style>
        label.error{
            color: red;
            width: auto;
        }
    </style>
</head>
<body>
    <div>
        <div th:insert="common/mainHeader :: main_header"></div>
        <div class="main_frame">
            <div class="main_left">
                <ul>
                    <li class="active">
                        <a th:href="@{/main}">
                            用户列表
                        </a>
                    </li>
                    <li>
                        <a th:href="@{/news/newsUI}">
                            新闻列表
                        </a>
                    </li>
                    <li>
                        <a th:href="@{/certs/certsUI}">
                            证书列表
                        </a>
                    </li>
<!--                    <li>-->
<!--                        <a th:href="@{/uis/judgesUI}">-->
<!--                            评委列表-->
<!--                        </a>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <a th:href="@{/uis/scoreOptionsUI}">-->
<!--                            评分选项-->
<!--                        </a>-->
<!--                    </li>-->
                </ul>
            </div>
            <div class="main_right">
                <div class="main_right_container">
                    <div class="main_right_title">
                        <p><i class="bi bi-house-fill" style="font-size: 0.9rem;"></i>用户列表</p>
                    </div>
                    <div class="right_table">
                        <form class="form-horizontal" id="myForm" th:action="@{/main}" method="post">
                            <div class="table_form search">
<!--                                <input type="button" th:if="${session.user.userRole == 1}" class="btn btn-success" id="add" value="添加管理用户" >-->
                                <input type="button" class="btn btn-info" id="export" th:value="导出">
                            </div>
                            <div class="table_form search" th:if="${session.user.area == 0}">
                                <select id="areaSearch" name="areaSearch">
                                    <option data-value="0" value="0">请选择地域</option>
                                    <option th:each="ar, arState : ${areas}" th:value="${ar.id}" th:selected="${areaSearch}==${ar.id}" th:text="${ar.name}"></option>
                                </select>
                                <input type="button" class="btn btn-primary" id="search" value="搜索" >
                            </div>
                            <div class="table_form">
                                <table class="table">
                                    <thead>
                                    <tr>
                                        <th>姓名</th>
                                        <th>手机号</th>
                                        <th>赛道</th>
                                        <th>所属地域</th>
                                        <th>来源</th>
                                        <th>团队名称</th>
                                        <th>是否需要辅导</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody th:if="${data} != null">
                                    <tr th:each="te,tStat : ${data.records}">
                                        <td><span th:text="${te.name}"></span></td>
                                        <td><span th:text="${te.phone}"></span></td>
                                        <td><span th:text="${te.typeName}"></span></td>
                                        <td><span th:text="${te.areaName}"></span></td>
                                        <td><span th:text="${te.sourceName}"></span></td>
                                        <td><span th:unless="${#strings.isEmpty(te.team)}"><span th:text="${te.team.teamName}"></span></span></td>
                                        <td><span th:unless="${#strings.isEmpty(te.team)}"><span th:text="${te.team.coach == 1?'是':'否'}"></span></span></td>
                                        <td><a href="#" th:onclick="|javascript:view('${te.id}')|" data-toggle="modal" data-target="#myModal">查看</a></td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="table_form" th:if="${data != null}">
                                <span th:if="${data.current == 1}" style="color: gray">首页 上一页</span>
                                <span th:if="${data.current > 1}">
                                    <a href="#" th:onclick="page_jump(1)">首页</a>
                                    <a th:data-id="${data.current}" href="#" onclick="page_jump(this.getAttribute('data-id')-1)">上一页</a>
                                </span>
                                第<span th:text="${data.current}"></span>页，共<span th:text="${data.total}"></span>条
                                <span th:if="${data.current == ((data.total/data.size)==0?1:(data.total%data.size==0?(data.total/data.size):(data.total/data.size+1)))}" style="color: gray">下一页 尾页</span>
                                <span th:if="${data.current < ((data.total/data.size)==0?1:(data.total%data.size==0?(data.total/data.size):(data.total/data.size+1)))}">
                                    <a th:data-id="${data.current+1}" href="#" onclick="page_jump(this.getAttribute('data-id'))">下一页</a>
                                    <a th:data-id="${((data.total/data.size)==0?1:(data.total%data.size==0?(data.total/data.size):(data.total/data.size+1)))}" href="javascript:void(0)" onclick="page_jump(this.getAttribute('data-id'))">尾页</a>
                                </span>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">查看用户信息</h4>
                </div>
                <div class="modal-body">
                    <div id="view_infos">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <!--====== RULE PART ENDS ======-->

    <!--====== Jquery js ======-->
    <script src="/js/jquery-1.12.4.min.js"></script>
    <script src="/js/modernizr-3.7.1.min.js"></script>

    <!--====== Bootstrap js ======-->
    <script src="/js/bootstrap.min.js"></script>

    <script src="/js/sweetalert.min.js"></script>
    <script src="/js/jquery-validate.js"></script>

    <script src="/js/common.js"></script>
    <script type="text/javascript" th:inline="javascript">
        function page_jump(pageNo){
            window.location.href = '/main?areaSearch='+$('#areaSearch').val()+'&pageNo='+pageNo;
        }
        $(document).ready(function(){
            $('#search').click(function(){
                window.location.href = '/main?areaSearch='+$('#areaSearch').val();
            })
            $('#export').click(function(){
                window.location.href = '/excel?areaSearch='+$('#areaSearch').val();
            })
        })

        function view(id){
            const formData = {
                id: id
            };
            $.ajax({
                type: 'POST',
                url: '/users/getTeam',
                data: formData,
                dataType: 'json',
                success: function(data) {
                    if(data.message!=null){
                        swal({
                            text: data.message,
                            icon: 'error'
                        });
                    }else{
                        $('#view_infos').empty();
                        $('#view_infos').append('<div class="table_form"><label>姓名</label><span>'+ data.data.name +'</span></div>' +
                            '                        <div class="table_form"><label>手机号</label><span>'+ data.data.phone +'</span></div>' +
                            '                        <div class="table_form"><label>邮箱</label><span>'+ data.data.email +'</span></div>' +
                            '                        <div class="table_form"><label>赛道</label><span>'+ data.data.typeName +'</span></div>' +
                            '                        <div class="table_form"><label>所属地域</label><span>'+ data.data.areaName +'</span></div>' +
                            '                        <div class="table_form"><label>来源</label><span>'+ data.data.sourceName +'</span></div>');
                        if(data.data.team != null){
                            $('#view_infos').append('<div class="table_form"><label>团队名称</label><span>'+ data.data.team.teamName +'</span></div>' +
                                '                        <div class="table_form"><label>是否辅导</label><span>'+ data.data.team.coachName +'</span></div>' +
                                '                        <div class="table_form"><label>项目内容</label><a href="/download/'+ data.data.team.plan +'">点击下载</a></div>' +
                                '                        <div class="table_form"><label>项目介绍</label><a href="/download/'+ data.data.team.video +'">点击下载</a></div>');
                            let str = '<div class="table_form"><label>团队成员</label><table class="table">';
                            for(let i=0;i<data.data.members.length;i++){
                                str = str + '<tr><td>'+ data.data.members[i].memberName +'</td>' +
                                    '<td>'+ data.data.members[i].memberPhone +'</td>' +
                                    '<td>'+ data.data.members[i].memberEmail +'</td></tr>';
                            }
                            str = str + '</table></div>';
                            $('#view_infos').append(str);
                        }
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log('Error: ');
                }
            });
        }
    </script>
</body>
</html>
